import React from "react";
import Link from "next/link";
import {Group, Tooltip, ActionIcon, Button, Text} from "@mantine/core";
import {IconChevronCompactLeft} from "@tabler/icons-react";

export const IpdSimuHeader = ({
  stepName,
  backwardEnable,
  backwardLink,
  forwardEnable,
  forwardLink,
}: {
  stepName: string;
  backwardEnable: boolean;
  backwardLink: string;
  forwardEnable: boolean;
  forwardLink: string;
}) => {
  return (
    <Group justify="space-between">
      <Group>
        <Tooltip withArrow label="返回步骤首页" position="left">
          <ActionIcon variant="default" component={Link} href="/ipdv2/tools/relay-simulation/index">
            <IconChevronCompactLeft size={16} />
          </ActionIcon>
        </Tooltip>
        <Text size="sm" fw={500}>
          {stepName}
        </Text>
      </Group>
      <Group>
        <Button size="xs" component={Link} href={backwardLink} disabled={!backwardEnable}>
          上一步
        </Button>
        <Button size="xs" component={Link} href={forwardLink} disabled={!forwardEnable}>
          下一步
        </Button>
      </Group>
    </Group>
  );
};
